<template>
	<view class="content">
		<scroll-view
			scroll-y
			class="scroll"
			refresher-enabled
			:refresher-triggered="isLoading"
			@refresherrefresh="onRefreshData"
		>
			<view class="list" v-if="list.length">
				<view class="news-wrap" v-for="item in list" :key="item" @click="goDetail(item.orderId)">
					<view class="news">
						<u--text
							:text="`比赛名称： ${item.raceName}`"
							size="28rpx"
							lines="1"
							color="#333"
							bold
							margin="4rpx 0 12rpx"
						></u--text>
						<u--text
							:text="`姓名： ${item.trueName}`"
							size="28rpx"
							lines="1"
							color="#898989"
						></u--text>
						<u--text
							:text="`手机号： ${item.mobile}`"
							size="26rpx"
							lines="1"
							color="#898989"
							margin="10rpx 0 12rpx"
						></u--text>
						<u--text
							:text="`身份证号： ${item.cidNo}`"
							size="26rpx"
							lines="1"
							color="#898989"
							margin="10rpx 0 12rpx"
						></u--text>
						<view class="news-btn">
							<u-button
								text="查看证书"
								color="#e50012"
								shape="circle"
								size="small"
								customStyle="width:150rpx;height:52rpx;font-size:32rpx"
								:throttleTime="1500"
								:hoverStopPropagation="true"
								@click.native.stop="onOpenFile(item.certImg)"
								v-if="item.certImg"
							></u-button>
						</view>
					</view>
				</view>
				<u-loadmore
					fontSize="13"
					line
					marginTop="18"
					:status="status"
					loading-text="努力加载中~"
					loadmore-text="上拉加载更多~"
				/>
			</view>
			<view style="padding-top: 300rpx" v-else>
				<u-empty mode="list" width="250" />
			</view>
		</scroll-view>
		<view class="footer">
			<button class="footer-btn" @click="show = true">填报志愿者</button>
		</view>
		<u-popup :show="show" mode="bottom" @close="show = false" round="24rpx">
			<view class="popup">
				<view class="flex-between popup-tlt-wrap">
					<view class="popup-tlt">信息填写</view>
					<u-icon name="close" color="#000" size="44rpx" @click="show = false"></u-icon>
				</view>
				<scroll-view scroll-y="true" class="richbox" style="max-height: 60vh">
					<u--form :model="forms" labelWidth="200rpx" labelAlign="left" ref="uform">
						<u-form-item label="姓名" prop="name" borderBottom required>
							<u--input
								v-model="forms.name"
								placeholder="请输入姓名"
								border="none"
								inputAlign="right"
							></u--input>
						</u-form-item>
						<u-form-item label="手机号" prop="mobile" borderBottom required>
							<u--input
								v-model="forms.mobile"
								border="none"
								type="number"
								maxlength="11"
								placeholder="请输入"
								inputAlign="right"
							></u--input>
						</u-form-item>
						<u-form-item label="身份证号" prop="cno" required>
							<u--input
								v-model="forms.cno"
								type="idcard"
								border="none"
								maxlength="18"
								placeholder="请输入正确的身份证号"
								inputAlign="right"
							></u--input>
						</u-form-item>
					</u--form>
				</scroll-view>
				<view class="footer">
					<button class="footer-btn footer-btn-green" @click="show = false">返回</button>
					<button class="footer-btn" @click="onSubmit">确认</button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			isLoading: false,
			status: 'nomore', // loadmore / loading / nomore
			list: [],
			pages: 1,
			show: false,
			forms: {
				name: '',
				mobile: '',
				cno: ''
			}
		}
	},
	onLoad() {
		this.isLoading = true
	},
	methods: {
		getOrderList() {
			this.status = 'loading'
			/* prettier-ignore */
			this.$https(true, 'get', {
				url: '/member/volunteer/is'
			},(res) => {
				this.list = this.list.concat(res.data)
				this.isLoading= false
				if(res.data.length<10){
					this.status = 'nomore'
				}else{
					this.status = 'loadmore'
				}
			},(error)=>{
				this.isLoading = false
			})
			/* prettier-ignore */
		},
		// 下拉刷新
		onRefreshData() {
			this.isLoading = true
			this.pages = 1
			this.list = []
			this.getOrderList()
		},
		// 上拉加载
		onBottomLoad() {
			if (this.status === 'loadmore') {
				this.pages++
				this.getOrderList()
			}
		},
		goDetail(id) {
			// this.$utils.navigateTo(true, `/pagesA/my/order/detail?id=${id}`)
		},
		onOpenFile(url) {
			uni.previewImage({
				urls: [url]
			})
		},
		// 提交
		onSubmit() {
			if (!this.forms.name) {
				uni.$u.toast('请完善姓名！')
			} else if (!uni.$u.test.mobile(this.forms.mobile)) {
				uni.$u.toast('手机号格式错误！')
			} else if (!this.forms.cno) {
				uni.$u.toast('请完善身份证号！')
			} else {
				/* prettier-ignore */
				this.$https(true, 'post', {
					url: '/member/volunteer/check',
					data: this.forms
				},(res) => {
					uni.$u.toast(res.msg)
					this.show = false
					this.isLoading= true
				},(error)=>{
					console.log(err)
				})
				/* prettier-ignore */
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.content {
	width: 100%;
	position: relative;
	height: 100vh;
	display: flex;
	flex-direction: column;
}
.scroll {
	width: 100%;
	height: calc(100vh - 120rpx);
}
.list {
	padding: 20rpx 26rpx;
	.news {
		position: relative;
		&-wrap {
			width: calc(100% - 40rpx);
			background-color: #fff;
			margin-bottom: 20rpx;
			padding: 24rpx 20rpx;
		}
		&-img {
			width: 200rpx;
			height: 200rpx;
		}
		&-right {
			margin-left: 26rpx;
			max-width: 460rpx;
			width: 460rpx;
		}
		&-btn {
			display: flex;
			justify-content: flex-end;
		}
	}
}
.flex-end {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	padding: 12rpx 24rpx 24rpx;
}
.footer {
	width: calc(100% - 48rpx);
	padding: 0 24rpx;
	height: 120rpx;
	background-color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	position: fixed;
	bottom: 0;
	z-index: 9;
	border-top: 1px solid #e5e5e5;
	&-btn {
		width: 684rpx;
		height: 80rpx;
		background-color: #e50012;
		border-radius: 16rpx;
		font-size: 30rpx;
		color: #fff;
		margin: 0;
	}
}
.popup {
	padding: 32rpx 0 120rpx 0;
	&-tlt {
		font-size: 32rpx;
		font-weight: 600;
		color: #333;
		&-wrap {
			padding: 0 32rpx;
		}
	}
	.richbox {
		margin: 20rpx 32rpx;
		width: calc(100% - 64rpx);
	}
	.footer {
		width: 100%;
		height: 120rpx;
		border-top: 1px solid #e5e5e5;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		bottom: 0;
		z-index: 9;
		padding: 0;
		&-btn {
			width: 332rpx;
			height: 80rpx;
			line-height: 80rpx;
			background-color: #1e74f3;
			border-radius: 16rpx;
			font-size: 28rpx;
			color: #fff;
			margin: 0;
			&-green {
				background-color: #eff2f3;
				margin-right: 22rpx;
				color: #222;
			}
		}
	}
}
::v-deep {
	.u-button {
		margin: 0 !important;
	}
}
</style>
